<template>
  <div style="margin: 0 auto; width: 905px; height: 100%">
    <a-list
      class="list-demo-action-layout"
      item-layout="horizontal"
      :bordered="false"
      :split="false"
      :data="dataList"
    >
      <template #item="{ item }">
        <div
          style="
            background-color: #ffffff;
            width: 900px;
            height: 184px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 10px auto 15px;
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
            border-radius: 10px;
          "
        >
          <a-list-item class="list-demo-item" action-layout="vertical">
            <template #actions>
              <span
                class="action"
                key="heart"
                @click="onLikeChange(item.id)"
                style="margin-left: 10px"
              >
                <span v-if="item.hasThumb">
                  <IconHeartFill :style="{ color: '#f53f3f' }" size="15" />
                </span>
                <span v-else>
                  <IconHeart size="15" />
                </span>
                {{ item.thumbNum }}
              </span>
              <span class="action" key="star" @click="onStarChange(item.id)">
                <span v-if="item.hasFavour">
                  <IconStarFill
                    :style="{
                      color: '#ffb400',
                    }"
                    size="15"
                  />
                </span>
                <span v-else>
                  <IconStar size="15" />
                </span>
                {{ item.favourNum }}
              </span>
              <span class="action" @click="toPostPage(item.id)">
                <span> <icon-eye size="15" />查看 </span>
              </span>
            </template>
            <template #extra>
              <div class="image-area" v-if="item.cover">
                <img
                  alt="arco-design"
                  :src="item.cover"
                  style="
                    border-radius: 10px;
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                  "
                />
              </div>
            </template>
            <a-list-item-meta>
              <template #title>
                <h3 class="item-title" style="margin-top: -5px">
                  {{ item.title }}
                </h3>
              </template>
              <template #description>
                <a-space wrap align="start" class="item-tags">
                  <a-tag
                    v-for="(tag, index) of item.tagList"
                    :key="index"
                    color="cyan"
                  >
                    {{ tag }}
                  </a-tag>
                </a-space>
                <p class="item-description">{{ item.content }}</p>
              </template>
              <template #avatar>
                <a-avatar
                  shape="square"
                  style="margin-left: 15px; margin-top: -60px"
                  :image-url="item.userVO?.userAvatar"
                >
                </a-avatar>
              </template>
            </a-list-item-meta>
          </a-list-item>
        </div>
      </template>
    </a-list>
    <div style="display: flex; justify-content: flex-end; height: 100px">
      <a-pagination
        :total="total"
        show-jumper
        show-page-size
        @change="onPageChange"
        @pageSizeChange="onPageSizeChange"
        :pageSizeOptions="customPageSizeOptions"
        :current="current"
        :page-size="pageSize"
        :page-item-style="{ borderRadius: '5px', backgroundColor: '#F2F3F4' }"
        :active-page-item-style="{
          boxShadow: '0 1px 4px rgba(0, 0, 0, 0.2)',
          backgroundColor: '#FFFFFF',
          color: '#1a1a1a',
          borderRadius: '5px',
        }"
      >
        <template #page-item="{ page }"> {{ page }}</template>
        <template #page-item-step="{ type }">
          <icon-right
            :style="
              type === 'previous' ? { transform: `rotate(180deg)` } : undefined
            "
          />
        </template>
        <template #page-item-ellipsis>
          <icon-sun-fill />
        </template>
      </a-pagination>
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  PostControllerService,
  PostFavourControllerService,
  PostQueryRequest,
  PostThumbControllerService,
} from "../../generated";
import { ref, onMounted, watchEffect } from "vue";
import message from "@arco-design/web-vue/es/message";
import { useRoute, useRouter } from "vue-router";

const route = useRoute();
const router = useRouter();

interface PostItem {
  id: number;
  thumbNum: number;
  title: string;
  content: string;
  cover: string;
  userId: number;
  tagList: string[];
  userAvatar: string;
  hasThumb: boolean;
  favourNum: number;
  hasFavour: boolean;
}

const customPageSizeOptions = ref([10, 20, 30]);

const current = ref<number>(parseInt(route.query.current as string) || 1);
const pageSize = ref<number>(parseInt(route.query.pageSize as string) || 10);

const searchParams = ref<PostQueryRequest>({
  searchText: "",
  tags: [],
  pageSize: pageSize.value, // 设置pageSize的初始值
  current: current.value,
});

const dataList = ref<PostItem[]>([]);

const total = ref();

const loadData = async () => {
  const res = await PostControllerService.listPostVoByPageUsingPost(
    searchParams.value
  );
  if (res.code === 0) {
    dataList.value = res.data.records;
    total.value = res.data.total;
  } else {
    message.error("加载失败：" + res.message);
  }
};

/**
 * 监听 searchParams 变量，改变是触发页面的更新加载
 */
watchEffect(() => {
  searchParams.value = {
    ...searchParams.value,
    searchText: route.query.searchText,
  } as never;
  loadData();
});

/**
 * 页面加载时，请求数据
 */
onMounted(() => {
  loadData();
});
// 点爱心
const onLikeChange = async (postId: number) => {
  const res = await PostThumbControllerService.doPostThumbUsingPost({
    postId: postId,
  });
  if (res.code === 0) {
    const index = dataList.value.findIndex((item) => item.id === postId);
    if (index !== -1) {
      const post = dataList.value[index];
      post.thumbNum += res.data === 1 ? 1 : -1;
      post.hasThumb = res.data;
    }
  } else {
    message.error("点赞失败：" + res.message);
  }
};

/**
 * 收藏
 * @param postId
 */
const onStarChange = async (postId: number) => {
  const res = await PostFavourControllerService.doPostFavourUsingPost({
    postId: postId,
  });
  if (res.code === 0) {
    const index = dataList.value.findIndex((item) => item.id === postId);
    if (index !== -1) {
      const post = dataList.value[index];
      post.favourNum += res.data === 1 ? 1 : -1;
      post.hasFavour = res.data;
    }
  } else {
    message.error("收藏失败：" + res.message);
  }
};
/**
 * 跳转到查看帖子页面
 * @param id
 */
const toPostPage = (id: string) => {
  console.log(id);
  router.push({
    path: `/view/post/${id}`,
  });
};
// 切换当前页码
const onPageChange = (page: number) => {
  searchParams.value = {
    ...searchParams.value,
    current: page,
  };
  current.value = page;
  router.push({
    query: searchParams.value,
  });
  window.scrollTo({
    top: 220,
    behavior: "smooth",
  });
};
// 切换每页显示条数
const onPageSizeChange = (Size: number) => {
  searchParams.value = {
    ...searchParams.value,
    pageSize: Size,
  };
  pageSize.value = Size;
  router.push({
    query: searchParams.value,
  });
};

// 获取帖子头像
/*const getUserAvatar = async (userId: number, id: number) => {
  const res = await UserControllerService.getUserVoByIdUsingGet(userId);
  if (res.code === 0 && res.data && res.data.userAvatar) {
    const index = dataList.value.findIndex((item) => item.id === id);
    if (index !== -1) {
      dataList.value[index].userAvatar = res.data.userAvatar;
      return res.data.userAvatar;
    } else {
      console.warn(`未找到id为${userId}的用户`);
    }
  } else {
    console.error("头像加载失败：" + res.message);
  }
  return undefined;
};*/
</script>

<style scoped>
.list-demo-action-layout .image-area {
  width: 190px;
  height: 150px;
  border-radius: 2px;
  overflow: hidden; /* 限制图片溢出容器 */
  margin-right: 18px;
  margin-top: 10px;
}

.list-demo-action-layout .image-area img {
  width: 100%;
}

.list-demo-action-layout .arco-list-item-action .arco-icon {
  margin: 0 4px;
}

.list-demo-item .item-title {
  text-align: left;
  font-weight: normal; /* 去掉加粗 */
  margin-bottom: 2px; /* 调整标题与描述之间的底部间距 */
}

.list-demo-item .item-description {
  max-width: 620px;
  height: 45px;
  text-align: left;
  margin-top: -2px; /* 调整上边距为负值 */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2; /* 最大显示行数 */
  line-clamp: 2; /* 最大显示行数 */
  color: #3c3c4399;
}

.item-tags {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.list-demo-action-layout .arco-list-item {
  border-radius: 4px;
}

.action {
  display: inline-block;
  padding: 0 4px;
  color: var(--color-text-1);
  line-height: 24px;
  background: transparent;
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.1s ease;
}

.action:hover {
  background: var(--color-fill-3);
}
</style>
